<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>课程监测</el-breadcrumb-item>
      <el-breadcrumb-item>实时检测</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-header>
        <div class="tagg1">
          <el-select v-model="valueCollege" filterable placeholder="请选择学院">
            <el-option
              v-for="item in optionsCollege"
              :key="item.floorid"
              :label="item.floorid"
              :value="item.floorid"
            ></el-option>
          </el-select>
        </div>
        <div class="tagg2">
          <el-select v-model="valueClass" filterable placeholder="请选择班级">
            <el-option
              v-for="item in optionsClass"
              :key="item.college"
              :label="item.college"
              :value="item.college"
            ></el-option>
          </el-select>
        </div>
      </el-header>
      <div class="vedio">
        <video
          id="videoElement"
          controls
          autoplay
          muted
          width="500px"
          height="400px"
        ></video>
        <video
          id="videoElement2"
          controls
          autoplay
          muted
          width="500px"
          height="400px"
        ></video>
      </div>
      <div class="title">
        <h1>表&nbsp;情&nbsp;识&nbsp;别</h1>
        <h1>姿&nbsp;态&nbsp;识&nbsp;别</h1>
      </div>
      <div class="charts">
        <div id="mian"></div>
      </div>
    </el-card>
    <Bar />
  </div>
</template>

<script>
import flvjs from 'flv.js'
import Bar from '../chart/Bar.vue'
export default {
  components: { Bar },
  data() {
    return {
      flvPlayer: null,
      optionsCollege: [],
      valueCollege: '',
      optionsClass: [],
      valueClass: ''
    }
  },
  methods: {
    getVideoLeft() {
      if (flvjs.isSupported()) {
        const videoElement = document.getElementById('videoElement')
        // const videoElement2 = document.getElementById('videoElement2')
        this.flvPlayer = flvjs.createPlayer({
          type: 'flv',
          isLive: true,
          hasAudio: false,
          cors:true,
          // stashInitialSize: 128,
          url:
            'https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv'
          // url: 'http://1011.hlsplay.aodianyun.com/demo/game.flv'
        })
        this.flvPlayer.attachMediaElement(videoElement)
        // this.flvPlayer.attachMediaElement(videoElement2)
        // 加载视频流
        this.flvPlayer.load()
        this.flvPlayer.play()
      }
    },
    getVideoRight() {
      if (flvjs.isSupported()) {
        // const videoElement = document.getElementById('videoElement')
        const videoElement2 = document.getElementById('videoElement2')
        this.flvPlayer = flvjs.createPlayer({
          type: 'flv',
          isLive: true,
          hasAudio: false,
          // stashInitialSize: 128,
          url:
            'https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv'
          // url: 'http://1011.hlsplay.aodianyun.com/demo/game.flv'
        })
        // this.flvPlayer.attachMediaElement(videoElement)
        this.flvPlayer.attachMediaElement(videoElement2)
        this.flvPlayer.load()
        this.flvPlayer.play()
      }
    },

    async getInfo() {
      const { data: res } = await this.$axios.get('/api/admin/getFloorInfoAll')
      console.log(res)
      this.optionsCollege = res
      const { data: ress } = await this.$axios.get(
        '/api/admin/getCollegeInfoAll'
      )
      console.log(ress)
      this.optionsClass = ress
    }
  },
  mounted() {
    this.getVideoLeft()
    this.getVideoRight()
  },
  created() {
    // this.getInfo()
  }
}
</script>
<style lang="less" scoped>
.el-card {
  .vedio {
    display: flex;
    justify-content: space-around;
  }
  .el-header {
    display: flex;
    justify-content: space-around;
  }
  .title {
    margin-top: 20px;
    display: flex;
    justify-content: space-around;
    h1 {
      color: rgb(82, 76, 241);
      font-size: 30px;
    }
  }
}
</style>
